<template>
<div>
  <div class="listBox">

      <div class="item" v-for="item of product" :key="item.id">
        <router-link :to="{path:'/detail',query:{'id':item.id}}">
          <van-image width="100%" height="200" :src="item.imgList[0]" />
          <p class="title">{{item.productName}}</p>
          <div class="item-b">
            <span class="overH van-submit-bar__price">¥ {{item.price}}</span>
            <span class="overH van-card__price">400人付款</span>
            <van-icon @click.prevent="dian"  name="ellipsis" />
          </div>
        </router-link>
      </div>

  </div>
</div>
</template>

<script>
    export default {
      name: "productList",
      props:{
        product:{
          type:Array
        }
      },
      methods:{
        dian(){
          console.log('dddd')
        }
      }
    }
</script>

<style scoped>
  .listBox{
    padding: 0 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: space-between;
    background: #f8f8f8;
  }
  .item{
    width: 48%;
    background: #fff;
    margin-bottom: 12pt;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
  }
  .item-b{
    padding: 0 6px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    box-sizing: border-box;
  }
  .item-b span:nth-of-type(1){
    width: 30%;
  }
  .item-b span:nth-of-type(2){
    width: 55%;
  }
  .overH{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .title{
    padding: 0 6px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    font-size: 16px;
    font-family: 宋体;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  a{
    color: #2c3e50;
  }
</style>
